<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/WEB-INF/template/template.xhtml"
	xmlns:c="http://java.sun.com/jstl/core">
	
	
	<ui:define name="body">
	<f:view encoding="UTF-8">
		<h:form>

			<div class="div_center2">

				<div id="divNoticias" style="float: left; width: 65%;">
					<h2 class="h2_center">Notícias
					<h:commandLink action="#{noticiaMB.voltar}" rendered="#{noticiaMB.mostrarNoticia}">
						<h:graphicImage  library="iconUndo.png" url="/resources/images/iconUndo.png"></h:graphicImage>
					</h:commandLink>
					</h2>
					
					<div id="divCenter" class="div_center">
						<a4j:repeat id="repeatNoticia" value="#{noticiaMB.noticias}"
							var="noticia" rendered="#{!noticiaMB.mostrarNoticia}">


							<a4j:commandLink value="#{noticia.titulo}"
								action="#{noticiaMB.selecionarNoticia(noticia)}" render="@form"
								style="font-weight: bold;
								    font-size: 12px;
									color: #03C; 
									text-decoration: none;" />

							<h:panelGrid columns="2">
								<h:column>
									<p style="color: #848484; margin: 0; text-align: left;">#{noticia.subTitulo}</p>
								</h:column>
								<h:column>
									<h:graphicImage style="float: right" url="#{noticia.imagem}"></h:graphicImage>
								</h:column>
							</h:panelGrid>

							<br />
							<div style="margin-top: 0px; text-align: left; color: #848484;">
								<h:outputLabel style="color: #006400">#{noticia.categoria.descricao}</h:outputLabel>
								|
								<h:outputText value="#{noticia.dataNoticia}">
									<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
								</h:outputText>
							</div>
							<div class="hr" />
						</a4j:repeat>
						<h:outputText value="#{noticiaMB.textoNoticiaSelecionada} "
							escape="false" rendered="#{noticiaMB.mostrarNoticia}" />

					</div>
					<div style="width: 80%; margin: 0 auto;" class="wp-pagenavi">
						<a4j:commandLink action="#{noticiaMB.anterior}"
							rendered="#{noticiaMB.before}" value="«" render="@form"></a4j:commandLink>
						<a4j:repeat value="#{noticiaMB.paginacao}" var="numero">
							<div style="float: left;">
								<a4j:commandLink value="#{numero}" styleClass="pagesmaller dark"
									actionListener="#{noticiaMB.selecionarPagina(numero)}"
									render="@form" rendered="#{noticiaMB.paginaSelecionada != numero}"></a4j:commandLink>
									<a4j:region rendered="#{noticiaMB.paginaSelecionada == numero}">
										<span class="current">#{noticiaMB.paginaSelecionada}</span>
									</a4j:region>
							</div>
						</a4j:repeat>
						<a4j:commandLink rendered="#{noticiaMB.next}"
							action="#{noticiaMB.proximo}" value="»" render="@form"></a4j:commandLink>
					</div>
				</div>
				<div style="float: right; width: 34%;">

					<h2 class="h2_right">Mais Lidas da Semana</h2>
					<div class="div_right">

						<a4j:repeat value="#{noticiaMB.maisLidasDaSemana}" var="maisLidas">

							<a4j:commandLink
								style="font-weight: bold;
								    font-size: 12px;
									color: #03C; 
									text-decoration: none;"
								value="#{maisLidas.noticia.titulo}"
								action="#{noticiaMB.selecionarNoticia(maisLidas.noticia)}"
								render="@form"></a4j:commandLink>
							<div class="hr" />
						</a4j:repeat>

					</div>


					<h2 class="h2_right">Categorias Mais Acessadas</h2>
					<div class="div_right">

						<a4j:repeat value="#{noticiaMB.categoriasMaisAcessadas}"
							var="categoria">
							<h:outputLabel style="color: #03C;">#{categoria.descricao}</h:outputLabel> 
						(<h:outputLabel style="color: #B90000;">#{categoria.quantidadeAcessos}</h:outputLabel>)
						<h:outputLabel style="color: #848484;">acessos</h:outputLabel>
							<br />
						</a4j:repeat>

					</div>

				</div>
			</div>


		</h:form>
		
		</f:view>
	</ui:define>

</ui:composition>